<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>抖音桌面版 By Golmic</title>
    <link rel="stylesheet" href="node_modules/dplayer/dist/DPlayer.min.css">
    <link rel="stylesheet" href="node_modules/mdui/dist/css/mdui.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="node_modules/mdui/dist/js/mdui.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script src="node_modules/dplayer/dist/DPlayer.min.js"></script>
</head>

<body>
    <div id="dplayer" class="center"></div>
    <div id="version" class="center" style="display: none;">发现更新，请
        <button class="mdui-btn mdui-btn-raised" action="outer" value="https://github.com/lujqme/douyin/releases">前往升级</button>
    </div>
    <div id="info">
        <img id="avatar" src="" alt="avatar">
        <div>
            <b>
                <p id="username"></p>
            </b>
            <p id="description"></p>
        </div>
    </div>
    <div id="tabs">
        <button id="love" class="mdui-btn mdui-btn-raised" action="love">加入收藏</button>
        <button id="unlove" class="mdui-btn mdui-btn-raised" action="unlove" style="display: none;">取消收藏</button>
        <button id="favourite" class="mdui-btn mdui-btn-raised" action="changeTab" value="favourite.html">收藏列表</button>
    </div>
    <footer class="center">
        <p>Made with love by
            <a action="outer" value="https://github.com/lujqme/">Golmic</a> on
            <a action="outer" value="https://github.com/lujqme/douyin">Github</a>
        </p>
    </footer>
</body>

<script>
    const electron = require('electron');
    const ipcRenderer = electron.ipcRenderer;
    const shell = electron.shell;
    let pageUrl, comments, description, cover;
    let dplayer = document.getElementById('dplayer')
    const dp = new DPlayer({
        container: dplayer,
        loop: true,
        volume: 0.7,
        hotkey: false,
        danmaku: {
            id: 'douyin'
        }
    });
    dp.danmaku.show();
    document.getElementsByClassName('dplayer-comment')[0].style.display = 'none';
    ipcRenderer.on('refresh', function (event, message) {
        pageUrl = message.url;
        comments = message.comments;
        document.getElementById('unlove').setAttribute('value', pageUrl);
        getVideoInfo(pageUrl);
    });
    ipcRenderer.on('error', function (event, message) {
        alert(message);
    });
    ipcRenderer.on('version', function (event, message) {
        document.getElementById('version').style.display = 'block';
    });
    ipcRenderer.on('isLoved', function (event, isLoved) {
        if (isLoved) {
            document.getElementById('love').style.display = 'none';
            document.getElementById('unlove').style.display = 'inline';
        } else {
            document.getElementById('love').style.display = 'inline';
            document.getElementById('unlove').style.display = 'none';
        }
    });

    function draw(i) {
        dp.danmaku.draw({
            text: i,
            color: '#fff',
            type: 'right'
        });
    }

    function getVideoInfo(url) {
        axios.get(url, {
                timeout: 4000
            })
            .then(function (response) {
                const data = response.data;
                const avatar = data.match('<div class="avatar[^"]+"><img src="([^"]+)')[1];
                document.getElementById('avatar').setAttribute('src', avatar);
                cover = data.match('cover: "([^"]+)')[1];
                const username = data.match('<p class="name.*?>(.*?)</p>')[1];
                document.getElementById('username').innerText = username;
                description = data.match('<p class="desc">(.*?)</p>');
                if (description !== null) {
                    document.getElementById('description').innerText = description[1];
                }
                const videoSrc = data.match('playAddr: ?"([^"]+)')[1];
                dp.switchVideo({
                    url: videoSrc
                });
                dp.play();
                comments.forEach(i => {
                    setTimeout(() => {
                        draw(i)
                    }, Math.random() * 15000);
                });
            })
            .catch(function (error) {
                console.log(url);
                console.log(error);
                alert(error);
                // ipcRenderer.send('refresh', null);
            });
    }
    document.body.addEventListener('click', function (event) {
        if (!event.srcElement.hasAttribute("action")) {
            return
        }
        let action = event.srcElement.attributes["action"].value;
        if (action === 'love') {
            ipcRenderer.send('love', {
                url: pageUrl,
                cover,
                description
            });
            return
        }
        let value = event.srcElement.attributes["value"].value;
        if (action === 'outer') {
            shell.openExternal(value);
            return
        }
        ipcRenderer.send(action, value);
    });
    window.onload = function () {
        ipcRenderer.send('refresh', null);
        ipcRenderer.send('checkUpdate', null);
    }
</script>

</html>